@charset "UTF-8";
// 颜色变量
$color-orange: #FF9600;
$color-green: #99CC33;
$color-blue: #4FB3EE;
$color-pink: #F45C95;
$color-gray: #AFADAE;

// 基本属性
ul {
  padding: 0;
  list-style: none;
}

// 布局
.wrapper {
  position: relative;
  width: 990px;
  margin: 0 auto;
  @include clearfix();
}

.wrapper-inner {
  padding: 0 90px;
}

.page {
  //position: relative;
  //overflow: hidden;
  width: 100%;
}

// 图标
%sprite {
  display: inline-block;
  background: url("../../images/special/service/sprite.png") no-repeat;
}

.slidedown {
  @extend %sprite;
  background-position: 0 -207px;
  width: 50px;
  height: 29px;
  position: fixed;
  bottom: 30px;
  left: 50%;
  margin-left: -25px;
  z-index: 10;
}

// 模块标题
%mod-title {
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
  color: #fff;
  .f-title {
	padding-top: 80px;
	margin: 0;
	font-size: 46px;
  }
  small {
	@include opacity(.6);
	font-size: 18px;
  }
}

.f2-title, .f3-title, .f4-title, .f5-title, .f6-title {
  @extend %mod-title;
}

.f6-title {
  color: $color-gray;
}

// 模块描述
.f-des {
  @extend %sprite;
  background-position: -72px -203px;
  width: 810px;
  height: 70px;
  padding: 10px 40px;
  color: #fff;
  line-height: 24px;
  margin-bottom: 40px;
}

.f2-des {
  margin: 30px 0 30px 90px;
}

.f6-des {
  color: $color-gray;
  span {
	margin-right: 30px;
  }
}

// 顶部导航

// 第一屏
.f1-wrap {
  min-height: 1000px;
  background: #000;
  .f1-inner {
	position: absolute;
	left: 20%;
	top: 60%;
	width: 748px;
	height: 558px;
	//margin: -374px 0 0 -279px;
	text-align: center;
	li {
	  display: inline-block;
	  margin-top: 80px;
	}
	.item1, .item2, .item3, .item4 {
	  @extend %sprite;
	  width: 292px;
	  height: 50px;
	  text-indent: -9999px;
	}
	.item1 {
	  background-position: -203px -3px;
	  margin-right: 80px;
	}
	.item2 {
	  background-position: -608px -3px;
	}
	.item3 {
	  background-position: -203px -88px;
	  margin-right: 80px;
	}
	.item4 {
	  background-position: -608px -88px;
	}
  }
}

.f1-name {
  text-align: center;
  .f1-logo {
	@extend %sprite;
	background-position: 0 0;
	width: 184px;
	height: 175px;
  }
  .f1-title {
	font-size: 50px;
	color: #E6E6E6;
  }
}

// 第二屏
.f2-wrap {
  min-height: 1000px;
  background: $color-orange;
}

.f2-con {
  .hd {
	text-align: center;
	ul {
	  margin: 0 -15px;
	}
	li {
	  display: inline-block;
	  padding: 0 15px;
	  span {
		display: inline-block;
		width: 150px;
		height: 48px;
		line-height: 48px;
		font-size: 16px;
		background-color: $gray-base;
		color: #fff;
	  }
	  &.cur span {
		background-color: #fff;
		color: $gray-base;
	  }
	}
  }
  .img-con {
	.img-l {
	  float: left;
	  width: 310px;
	  height: 430px;
	}
	.img-r {
	  float: right;
	  width: 680px;
	  .map-item {
		position: relative;
		float: left;
		width: 310px;
		height: 200px;
		margin-left: 30px;
		margin-bottom: 30px;
		article {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-color: rgba($gray-base,.8);
		  color: #fff;
		  text-align: center;
		  i{
			@extend %sprite;
			background-position: -77px -360px;
			width: 30px;
			height: 30px;
			margin-top: 40px;
		  }
		  h3{
			margin-top: 10px;
			color: #fff;
		  }
		  p{
			margin: 0;
			color: $color-gray;
		  }
		}
	  }
	}
  }
}

// 第三屏
.f3-wrap {
  background: #fff;
}

// 第四屏
.f4-wrap {
  background: $color-green;
}

.case-show {

}

// 第五屏
.f5-wrap {
  background: $color-pink;
}

.act-show {
  ul {
	margin: 0 -15px;
  }
  li {
	float: left;
	display: inline-block;
	width: 50%;
	padding: 0 15px;
	margin-bottom: 30px;
	img {
	  width: 100%;
	  -webkit-filter: grayscale(80%);
	  -moz-filter: grayscale(80%);
	  -ms-filter: grayscale(80%);
	  -o-filter: grayscale(80%);
	  filter: grayscale(80%);
	  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0.8);
	  -webkit-filter: grayscale(0.8);
	  &:hover {
		-webkit-filter: grayscale(0%);
		-moz-filter: grayscale(0%);
		-ms-filter: grayscale(0%);
		-o-filter: grayscale(0%);
		filter: grayscale(0%);
		filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0);
		-webkit-filter: grayscale(0)
	  }
	}
  }
}

// 第六屏
.f6-wrap {
  background: #fff;
}

.contact-form {
  .form-item {
	margin-bottom: 40px;
	label {
	  float: left;
	  width: 70px;
	  height: 40px;
	  line-height: 40px;
	  color: $color-gray;
	  font-size: 16px;
	  text-align: right;
	}
	input {
	  width: 290px;
	  height: 38px;
	  line-height: 38px;
	  border: 1px solid #ddd;
	  color: #666;
	  &:focus {
		border-color: $color-orange;
	  }
	}
	textarea {
	  width: 740px;
	  border: 1px solid #ddd;
	  color: #666;
	  &:focus {
		border-color: $color-orange;
	  }
	}
  }
  .submit-item {
	width: 100%;
	text-align: center;
	margin-bottom: 40px;
	.btn-submit {
	  width: 220px;
	  height: 50px;
	  text-align: center;
	  color: #fff;
	  font-size: 18px;
	  border: none;
	  background-color: $color-orange;
	}
  }
}

.foot-wrap {
  margin: 30px 0;
  width: 100%;
  text-align: center;
  color: $color-gray;
}

